<template>
  <div>
        <!--整个大页面-->
        <div id="search-condition" >
            <el-form :inline="true" :model="form" class="query-form-inline">
                <el-form-item label="所属部门" label-width="68px">
                  <el-select v-model="queryParams.deptId" size="mini" placeholder="请选择所属部门">
                    <el-option label-width="68px" v-for="dept in this.form.formDept"  :value="dept.deptId" :key="dept.deptId" :label="dept.deptName" size="mini" ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="患者姓名" label-width="68px">
                  <el-input v-model="queryParams.patientName" size="mini" placeholder="患者姓名"></el-input>
                </el-form-item>

                <el-form-item label="挂号类型" label-width="68px">
                    <el-select v-model="queryParams.rfeeId" size="mini" placeholder="请选择挂号类型">
                      <el-option v-for="fee in form.rfee" :value="fee.rfeeId" :key="fee.rfeeId" :label="fee.rfeeName" size="mini" ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="挂号时段" label-width="68px">
                  <el-select v-model="queryParams.registerPotime" size="mini" placeholder="请选择挂号时段">
                    <el-option  label-width="68px" size="mini" label="上午" value="1"></el-option>
                    <el-option label-width="68px" size="mini"  label="下午" value="2"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="挂号状态" label-width="68px">
                  <el-select v-model="queryParams.registerStatus" size="mini" placeholder="请选择挂号状态">
                    <el-option  label-width="68px" size="mini" label="未收费" value="0"></el-option>
                    <el-option  label-width="68px" size="mini" label="已收费" value="1"></el-option>
                    <el-option  label-width="68px" size="mini" label="已退费" value="2"></el-option>
                    <el-option  label-width="68px" size="mini" label="待诊" value="3"></el-option>
                    <el-option  label-width="68px" size="mini" label="就诊中" value="4"></el-option>
                    <el-option  label-width="68px" size="mini" label="就诊完成" value="5"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="挂号时间" label-width="68px">
                  <el-date-picker
                    v-model="queryParams.registerDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="mini" @click="onQuery">查询</el-button>
                    <el-button type="primary" size="mini" @click="onreset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="show-data">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="患者姓名">
                    <span>{{ props.row.kbjzPatient.patientName }}</span>
                  </el-form-item>
                  <el-form-item label="患者电话">
                    <span>{{ props.row.kbjzPatient.patientPhone }}</span>
                  </el-form-item>
                  <el-form-item label="患者编号">
                    <span>{{ props.row.kbjzPatient.patientId }}</span>
                  </el-form-item>
                  <el-form-item label="患者性别">
                    <span>{{ props.row.kbjzPatient.patientSex }}</span>
                  </el-form-item>
                  <el-form-item label="患者年龄">
                    <span>{{ props.row.kbjzPatient.patientAge }}</span>
                  </el-form-item>
                  <el-form-item label="地址信息">
                    <span>{{ props.row.kbjzPatient.patientAddress }}</span>
                  </el-form-item>
                  <el-form-item label="过敏史">
                    <span>{{ props.row.kbjzPatient.patientAllergy }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="患者姓名"
              prop="kbjzPatient.patientName">
            </el-table-column>
            <el-table-column
              label="挂号科室"
              prop="sysDept.deptName">
            </el-table-column>
            <el-table-column
              label="接诊医生"
              prop="sysUser.userName">
            </el-table-column>
            <el-table-column
              label="挂号费用"
              prop="sysRegFee.rfeePrice">
            </el-table-column>
            <el-table-column
              label="流水编号"
              prop="pipeNum">
            </el-table-column>
            <el-table-column
              label="状态"
              >
              <template slot-scope="props">
                <span v-if="props.row.registerStatus == 0">未支付</span>
                <span v-else-if="props.row.registerStatus == 1">已支付</span>
                <span v-else-if="props.row.registerStatus == 2">已退款</span>
                <span v-else-if="props.row.registerStatus == 3">待诊</span>
                <span v-else-if="props.row.registerStatus == 4">就诊中</span>
                <span v-else-if="props.row.registerStatus == 5">就诊完成</span>
              </template>
            </el-table-column>
            <el-table-column
              label="就诊日期"
              prop="registerDate">
            </el-table-column>
            <el-table-column
              label="挂号类型"
              prop="sysRegFee.rfeeName">
            </el-table-column>
            <el-table-column
              label="挂号时段"
              >
              <template slot-scope="props">
                <span v-if="props.row.registerPotime == 1">上午</span>
                <span v-else-if="props.row.registerPotime == 2">下午</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-check"
                  type="primary"
                  v-if="scope.row.registerStatus != 4 && scope.row.registerStatus != 5"
                  @click="handleCharge(scope.$index, scope.row)">收费</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-close"
                  v-if="scope.row.registerStatus != 4 && scope.row.registerStatus != 5"
                  @click="handleRefund(scope.$index, scope.row)">退费</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--设置分页-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="this.queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.queryParams.total">
          </el-pagination>
        </div>
  </div>
</template>

<script>
    import { selectList,getDeptInfo} from "@/api/kbjz/register";
    import {selectRegisterByCondition,handleChargeAndRefund,selectRegisterInfo} from "@/api/kbjz/ghlist";
    export default {
        name: "index",
        data() {
            return {
                queryParams:{
                    pageNum:1,
                    pageSize:10,
                    total:undefined,
                    deptId:undefined,
                    registerDate:undefined,
                    registerStatus:undefined,
                    registerPotime:undefined,
                    rfeeId:undefined,
                    patientName:undefined,
                    flag:false,
                },
                form:{
                    formDept:undefined,
                    rfee:undefined,
                },
                tableData: [],
                currentRow:'',
            }
        },
        created(){
            //查询挂号类型
            selectList().then(
                res=>{
                    this.form.rfee = res.data;
                }
            );
            getDeptInfo().then(
                res=>{
                    this.form.formDept = res.rows;
                }
            );
            selectRegisterInfo(this.queryParams).then(
                res=>{
                    this.tableData = res.rows;
                    this.queryParams.total =res.total;
                }
            );
        },
        methods: {
            onQuery() {
                selectRegisterByCondition(this.queryParams).then(
                    res=>{
                        this.tableData = res.rows;
                        this.queryParams.total =res.total;
                    }
                );
            },
            onreset(){
                  this.queryParams.deptId=undefined,
                  this.queryParams.registerDate=undefined,
                  this.queryParams.registerStatus=undefined,
                  this.queryParams.registerPotime=undefined,
                  this.queryParams.rfeeId=undefined,
                  this.queryParams.patientName=undefined
            },
            /*收费*/
            handleCharge(index, row) {
                this.queryParams.registerId = row.registerId;
                this.queryParams.cost = row.sysRegFee.rfeePrice;
                this.queryParams.registerStatus =1;
                handleChargeAndRefund(this.queryParams).then(
                    res=>{
                        if (res.code == 200){
                            row.registerStatus = 1;
                        }
                    }
                );
            },
            /*退费*/
            handleRefund(index, row) {
                this.queryParams.registerId = row.registerId;
                this.queryParams.cost = row.sysRegFee.rfeePrice;
                this.queryParams.registerStatus =2;
                handleChargeAndRefund(this.queryParams).then(
                    res=>{
                        if (res.code == 200){
                            row.registerStatus = 2;
                        }
                    }
                );
            },
            /*每页显示的条数*/
            handleSizeChange(val) {
                this.queryParams.pageSize = val;
            },
            /*当前页*/
            handleCurrentChange(val){
                this.currentRow = val;
            }

        }
    }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
